<template>
  <view class="code">
    <view class="top">
      <view class="notice">
        <view class="icon"></view>
        <view class="text">请验证签约密码</view>
      </view>
      <view class="phone_code_single">
        <input
          class="phone_code_single_cinput"
          adjust-position="false"
          auto-focus
          auto-blur="true"
          @blur="codeNumBlurFun"
          @input="codeNumInputFun"
          :focus="focus"
          v-model="code"
          type="number"
          maxlength="4"
          style="opacity: 0"
          height="300px"
        />
        <view class="phone_code_single_codeinput">
          <view
            v-for="(item, index) in 4"
            class="input-item"
            :key="index"
            @click="codefocusFun(index)"
            :style="
              code[index] || code[index] === 0
                ? 'background-color:#2a82e4; color:#fff; border:none!important'
                : ''
            "
          >
            {{ code[index] }}
          </view>
        </view>
      </view>

      <view class="desc">
        该【签约密码】并非【登录密码】，仅在验证签名时使用，为了保证您本人的签名安全，请您妥善保管【签约密码】
      </view>
      <view class="keyboard-container">
        <view
          v-for="item in keyboard"
          :key="item"
          @click="handleKeyClick(item)"
        >
          <text v-if="item !== 'icon'">
            {{ item }}
          </text>
          <u-icon name="backspace" v-else></u-icon>
        </view>
      </view>
    </view>
    <view class="next"> 下一步 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      code: '',
      focus: true,
      keyboard: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'icon'] // 键盘上的数字
    }
  },
  onLoad() {},
  methods: {
    /**

     * DESC: 输入框输入事件
     * */
    codeNumInputFun(e) {
      let val = e.detail.value
      this.code = val
    },
    /**

     * DESC: 输入框失去焦点事件
     * */
    codeNumBlurFun(e) {
      let val = e.detail.value
      this.focus = false
    },
    /**

     * DESC: 输入框点击事件
     * @param {Number} index 当前点击框索引
     * */
    codefocusFun(index) {
      this.focus = true
    },
    handleKeyClick(e) {
      if (!e) return
      if (this.code.length === 4 && e !== 'icon') return
      if (e !== 'icon') {
        this.code += e
        this.focus = true
      } else {
        this.code = this.code.substr(0, this.code.length - 1)
        this.focus = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}

page {
  background-color: #fff;
}
.notice {
  display: flex;
  align-items: center;
  margin-top: rpx(92);

  .icon {
    width: rpx(43);
    height: rpx(53);
    background: url('../../static/images/set-contract-password/password.png')
      no-repeat;
    background-size: 100% 100%;
    margin: 0 rpx(20) 0 rpx(60);
  }

  .text {
    font-size: rpx(46);
  }
}

.codes {
  padding-top: rpx(200);
  padding-bottom: rpx(80);
}
.desc {
  color: #a6a6a6;
  font-size: rpx(26);
  padding: 0 rpx(70);
  border: 1px solid transparent;
  margin-bottom: rpx(137);
}
.next {
  width: rpx(428);
  height: rpx(84);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: rpx(20);
  margin: rpx(80) auto;
  background-color: #2a82e4;
  color: #fff;
}

.input-container {
  display: flex;
  width: 100%;
  margin: rpx(120) auto rpx(75);
  justify-content: center;
}
.input-item {
  width: 128rpx;
  height: 128rpx;
  opacity: 1;
  border-radius: 16px;
  background: rgba(146, 143, 255, 0.1);
  border: 1.5px solid rgba(146, 143, 255, 1);
  text-align: center;
  font-size: 40rpx;
  font-weight: 700;
  margin: 20rpx;
  line-height: 128rpx;
  &.filled {
    background-color: #2a82e4;
    color: #fff;
  }
}

.keyboard-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  font-size: 48rpx;
  font-weight: 500;
  color: rgba(18, 24, 38, 1);
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.keyboard-container view {
  width: 33.33%; /* 设置为三分之一宽度，以适应三个数字一行 */
  text-align: center;
  margin-bottom: 10px;
}
.phone_code_single_codeinput {
  display: flex;
  justify-content: center;
  margin-bottom: rpx(40);
}
</style>
